<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/text2.js'></scr"+"ipt>");
</script>
<script language="JavaScript" src="color_picker.js"></script>
<script>writeTitle()</script>
<script language="JavaScript" src="list.js"></script>
<script>
var dialogArgument=['parent', 'parent'];

document.onclick=hideAll;
function hideAll()
  {
  oColor1.hide();oColor2.hide();
  }

var obj1 = new ListEditor("obj1")

function bodyOnLoad()
  {

  loadTxt();

  //Font-Family
  var arrFontName=parent.oUtil.obj.arrFontName;
  var sTmp="["
  for(var i=0;i<arrFontName.length;i++)
    {
    sFontName=arrFontName[i];
    sTmp+="['"+sFontName+"','"+sFontName+"','font:8pt "+sFontName+";'],"
    }
  sTmp=sTmp.substr(0,sTmp.length-1)
  sTmp+="]";
  obj1.items=eval(sTmp);
  divFont_family.innerHTML=obj1.RUN()
  obj1.onEdit = updateFont_Family

  //Load current style
  oPreview=eval(openerWin.dialogArgument[1]);

  inpFont_Family.value=oPreview.style.fontFamily;
  inpFont_Size.value=oPreview.style.fontSize;

  if(oPreview.style.fontStyle=="italic" && oPreview.style.fontWeight=="bold")
    inpFont_StyleWeight.value = sStyleWeight4;
  else if(oPreview.style.fontStyle=="italic")
    inpFont_StyleWeight.value = sStyleWeight2;
  else if(oPreview.style.fontWeight=="bold")
    inpFont_StyleWeight.value = sStyleWeight3;
  else if(oPreview.style.fontWeight=="normal" && oPreview.style.fontStyle=="normal")
    inpFont_StyleWeight.value = sStyleWeight1;
  else
    inpFont_StyleWeight.value = "";

  if(oPreview.style.textDecoration=="underline") inpText_Decoration[1].checked=true;
  else if(oPreview.style.textDecoration=="overline") inpText_Decoration[2].checked=true;
  else if(oPreview.style.textDecoration=="line-through") inpText_Decoration[3].checked=true;
  else if(oPreview.style.textDecoration=="none") inpText_Decoration[4].checked=true;
  else inpText_Decoration[0].checked=true;

  if(oPreview.style.textTransform=="capitalize") inpText_Case[1].checked=true;
  else if(oPreview.style.textTransform=="uppercase") inpText_Case[2].checked=true;
  else if(oPreview.style.textTransform=="lowercase") inpText_Case[3].checked=true;
  else if(oPreview.style.textTransform=="none") inpText_Case[4].checked=true;
  else inpText_Case[0].checked=true;

  if(oPreview.style.fontVariant=="small-caps")inpFont_Variant[1].checked=true;
  else if(oPreview.style.fontVariant=="normal")inpFont_Variant[2].checked=true;
  else inpFont_Variant[0].checked=true;

  if(oPreview.style.verticalAlign=="")
    {
    inpText_VAlign[0].checked=true;
    inpText_VAlign_Relative.value="";
    }
  if(oPreview.style.verticalAlign=="super")
    {
    inpText_VAlign[1].checked=true;
    inpText_VAlign_Relative.value="";
    }
  if(oPreview.style.verticalAlign=="sub")
    {
    inpText_VAlign[2].checked=true;
    inpText_VAlign_Relative.value="";
    }
  if(oPreview.style.verticalAlign=="top" ||
    oPreview.style.verticalAlign=="middle" ||
    oPreview.style.verticalAlign=="bottom" ||
    oPreview.style.verticalAlign=="text-top" ||
    oPreview.style.verticalAlign=="text-bottom")
    {
    inpText_VAlign[3].checked=true;
    inpText_VAlign_Relative.value=oPreview.style.verticalAlign;
    }
  if(oPreview.style.verticalAlign=="baseline")
    {
    inpText_VAlign[4].checked=true;
    inpText_VAlign_Relative.value="";
    }

  inpText_ForegroundColor.style.backgroundColor=oPreview.style.color;
  inpText_BackgroundColor.style.backgroundColor=oPreview.style.backgroundColor;
  oColor1.color=oPreview.style.color;
  oColor2.color=oPreview.style.backgroundColor;

  inpText_LetterSpacing.value=oPreview.style.letterSpacing;

  preview()
  }



function updateFont_Family()
  {
  sVal = ""
  var arrList = obj1.getResultValues()
  for(var i=0;i<arrList.length;i++) sVal += arrList[i] + ", ";
  sVal = sVal.substring(0,sVal.length-2)
  inpFont_Family.value = sVal

  preview()
  }

function preview()
  {
  //divPreview selalu di-renew (bukan di-update) setiap kali style berubah (shg tdk perlu remove rule).
  divPreview.innerHTML= "<table height=100% width=100%><tr><td valign=middle align=center>____________ <span id=spanPreview></span> ____________</td></tr></table>"
  if(inpFont_Family.value!="") spanPreview.innerHTML=inpFont_Family.value;
  else spanPreview.innerHTML="Text Preview";

  format(spanPreview);
  }

function format(s)
  {
  if(inpFont_Family.value!="")s.style.fontFamily=inpFont_Family.value;
  else
    {//Not Set
    s.style.fontFamily="";
    s.style.cssText = s.style.cssText.replace("FONT-FAMILY: ; ","");
    s.style.cssText = s.style.cssText.replace("FONT-FAMILY: ","");
    }

  if(inpFont_Size.value!="")s.style.fontSize=inpFont_Size.value;
  else
    {//Not Set
    s.style.fontSize="";
    s.style.cssText = s.style.cssText.replace("FONT-SIZE: ; ","");
    s.style.cssText = s.style.cssText.replace("FONT-SIZE: ","");
    }

  if(inpFont_StyleWeight.value=="")
    {//Not Set
    s.style.fontWeight="normal";s.style.fontStyle="normal"
    s.style.cssText = s.style.cssText.replace("FONT-WEIGHT: normal; ","");
    s.style.cssText = s.style.cssText.replace("FONT-WEIGHT: normal","");

    s.style.cssText = s.style.cssText.replace("FONT-STYLE: normal; ","");
    s.style.cssText = s.style.cssText.replace("FONT-STYLE: normal","");
    }
  if(inpFont_StyleWeight.value==sStyleWeight1){s.style.fontWeight="normal";s.style.fontStyle="normal"}
  if(inpFont_StyleWeight.value==sStyleWeight2){s.style.fontWeight="normal";s.style.fontStyle="italic"}
  if(inpFont_StyleWeight.value==sStyleWeight3){s.style.fontWeight="bold";s.style.fontStyle="normal"}
  if(inpFont_StyleWeight.value==sStyleWeight4){s.style.fontWeight="bold";s.style.fontStyle="italic";}

  if(inpText_Decoration[0].checked)
    {
    s.style.textDecoration="none";
    s.style.cssText = s.style.cssText.replace("TEXT-DECORATION: none; ","");
    s.style.cssText = s.style.cssText.replace("TEXT-DECORATION: none","");
    }
  if(inpText_Decoration[1].checked) s.style.textDecoration="underline";
  if(inpText_Decoration[2].checked) s.style.textDecoration="overline";
  if(inpText_Decoration[3].checked) s.style.textDecoration="line-through";
  if(inpText_Decoration[4].checked) s.style.textDecoration="none";

  if(inpText_Case[0].checked) s.style.textTransform = "";
  if(inpText_Case[1].checked) s.style.textTransform = "capitalize";
  if(inpText_Case[2].checked) s.style.textTransform = "uppercase";
  if(inpText_Case[3].checked) s.style.textTransform = "lowercase";
  if(inpText_Case[4].checked) s.style.textTransform = "none";

  if(inpFont_Variant[0].checked) s.style.fontVariant=""
  if(inpFont_Variant[1].checked) s.style.fontVariant="small-caps";
  if(inpFont_Variant[2].checked) s.style.fontVariant="normal";

  if(inpText_VAlign[0].checked)s.style.verticalAlign = "";
  if(inpText_VAlign[1].checked) s.style.verticalAlign = "super";
  if(inpText_VAlign[2].checked) s.style.verticalAlign = "sub" ;
  if(inpText_VAlign[3].checked) s.style.verticalAlign = inpText_VAlign_Relative.value;
  if(inpText_VAlign[4].checked) s.style.verticalAlign = "baseline"  ;

  s.style.color=inpText_ForegroundColor.style.backgroundColor;
  s.style.backgroundColor=inpText_BackgroundColor.style.backgroundColor;

  if(inpText_LetterSpacing.value=="")
    {
    s.style.letterSpacing=0
    s.style.cssText = s.style.cssText.replace("LETTER-SPACING: 0px; ","");
    s.style.cssText = s.style.cssText.replace("LETTER-SPACING: 0px","");
    }
  else
    {
    //Berkaitan dgn "Not Available"
    if(inpText_LetterSpacing.value!="na") s.style.letterSpacing=inpText_LetterSpacing.value+"px";
    }
  }

function doApply()
  {
  oPreview=eval(openerWin.dialogArgument[1]);
  format(oPreview);
  }
</script>
</head>
<body style="overflow:hidden;">

<table width=100% height="435px" align=center cellpadding=0 cellspacing=0 style="border-collapse:separate">
<tr>
<td valign=top style="padding:5px;">

  <table width=100% style="border-collapse:separate">
  <tr>
  <td valign=top style="padding-left:5px;padding-right:5px;">

  <div style="margin-bottom:3;"><b><span id=txtLang name="txtLang">Font</span> :</b></div>
  <input type=text name=inpFont_Family style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1px;"></div>
  <div id=divFont_family></div>

  </td>
  <td valign=top style="width:80px">

      <div style="margin-bottom:3;"><b><span id=txtLang name="txtLang">Style</span> :</b></div>
      <input type=text name=inpFont_StyleWeight style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1;"></div>
      <select size=6 style="width:100%" name="selFont_StyleWeight" onchange="inpFont_StyleWeight.value=selFont_StyleWeight.value;preview();" class="inpSel">
        <option id="optLang" name="optLang" selected>Regular</option>
        <option id="optLang" name="optLang">Italic</option>
        <option id="optLang" name="optLang">Bold</option>
        <option id="optLang" name="optLang">Bold Italic</option>
      </select>

  </td>
  <td valign=top style="padding-right:5px;width:80px">

      <div style="margin-bottom:3;"><b><span id=txtLang name="txtLang">Size</span> :</b></div>
      <input type=text name=inpFont_Size style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1;"></div>
      <select size=6 style="width:100%" name="selFont_Size" onchange="inpFont_Size.value=selFont_Size.value+'pt'; preview();" class="inpSel">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="20">20</option>
        <option value="22">22</option>
        <option value="24">24</option>
        <option value="26">26</option>
        <option value="28">28</option>
        <option value="36">36</option>
        <option value="48">48</option>
        <option value="72">72</option>
      </select>

  </td>
  </tr>
  <tr>
  <td colspan=3 style="padding-left:5px;padding-right:5px;">

      <div style="margin-bottom:5px;margin-top:3px;"><b><span id=txtLang name="txtLang">Foreground</span>:</b>
      <span style="">
      <span id="inpText_ForegroundColor" style="border:gray 1px solid;width:16px;height:16px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </span>
      <input type=button name="btnPick1" id="btnPick1" value=Pick onclick="oColor1.show(this);event.cancelBubble=true;" />
      <script>
      var oColor1 = new ColorPicker("oColor1");
      oColor1.onPickColor = new Function("inpText_ForegroundColor.style.backgroundColor=oColor1.color;preview()");
      oColor1.onRemoveColor = new Function("inpText_ForegroundColor.style.backgroundColor='';preview()");
      oColor1.align="left";
      oColor1.txtCustomColors=getTxt("Custom Colors");
      oColor1.txtMoreColors=getTxt("More Colors...");
      oColor1.url = parent.oUtil.obj.scriptPath + "color_picker.htm";
      oColor1.RENDER();
      </script>

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><span id=txtLang name="txtLang">Background</span>:</b>
      <span style="">
      <span id="inpText_BackgroundColor" style="border:gray 1px solid;width:16px;height:16px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </span>
      <input type=button name="btnPick2" id="btnPick2" value=Pick onclick="oColor2.show(this);event.cancelBubble=true;" />
      <script>
      var oColor2 = new ColorPicker("oColor2");
      oColor2.onPickColor = new Function("inpText_BackgroundColor.style.backgroundColor=oColor2.color;preview()");
      oColor2.onRemoveColor = new Function("inpText_BackgroundColor.style.backgroundColor='';preview()");
      oColor2.align="left";
      oColor2.onShow = new Function("inpText_VAlign_Relative.style.visibility='hidden';");
      oColor2.onHide = new Function("inpText_VAlign_Relative.style.visibility='visible';");
      oColor2.txtCustomColors=getTxt("Custom Colors");
      oColor2.txtMoreColors=getTxt("More Colors...");
      oColor2.url = parent.oUtil.obj.scriptPath + "color_picker.htm";
      oColor2.RENDER();
      </script>
      </div>

      <div style="margin-bottom:5px;margin-top:5px">
      <table width=100% style="border:#CFCFCF 1px solid;background:#f0f0f0" style="border-collapse:separate">
      <tr>
      <td><span id=txtLang name="txtLang">Decoration</span>:</td>
      <td><span id=txtLang name="txtLang">Text Case</span>:</td>
      <td><span id=txtLang name="txtLang">Minicaps</span>:</td>
      <td><span id=txtLang name="txtLang">Vertical</span>:</td>
      </tr>
      <tr><td valign=top>
      <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()" checked> <span id=txtLang name="txtLang">Not Set</span><br>
      <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name="txtLang">Underline</span><br>
      <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name="txtLang">Overline</span><br>
      <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name="txtLang">Line-through</span><br>
      <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name="txtLang">None</span>
      </td>
      <td valign=top>
      <input type=radio class=inpRdo name="inpText_Case" onclick="preview()" checked> <span id=txtLang name="txtLang">Not Set</span><br>
      <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name="txtLang">Capitalize</span><br>
      <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name="txtLang">Uppercase</span><br>
      <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name="txtLang">Lowercase</span><br>
      <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name="txtLang">None</span>
      </td>
      <td valign=top>
      <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()" checked> <span id=txtLang name="txtLang">Not Set</span><br>
      <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()"> <span id=txtLang name="txtLang">Small-Caps</span><br>
      <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()"> <span id=txtLang name="txtLang">Normal</span>
      </td>
      <td valign=top>
      <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()" checked> <span id=txtLang name="txtLang">Not Set</span><br>
      <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()"> <span id=txtLang name="txtLang">Superscript</span><br>
      <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()"> <span id=txtLang name="txtLang">Subscript</span><br>


      <table cellpadding=0 cellspacing=0 style="border-collapse:separate"><tr><td>
      <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()">&nbsp;
      </td><td>
      <span id="txtLang" name="txtLang">Relative</span> :&nbsp;
      </td><td>
      <select name="inpText_VAlign_Relative" style="vertical:bottom" onchange="preview()" class="inpSel">
        <option value="top" id="optLang" name="optLang">Top</option>
        <option value="middle" id="optLang" name="optLang" selected>Middle</option>
        <option value="bottom" id="optLang" name="optLang">Bottom</option>
        <option value="text-top" id="optLang" name="optLang">Text-Top</option>
        <option value="text-bottom" id="optLang" name="optLang">Text-Bottom</option>
      </select>
      </td></tr></table>

      <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()"> <span id="txtLang" name="txtLang">Baseline</span><br>
      </td>
      </tr></table>
      </div>

      <div style="margin-top:5px;">
      <b><span id=txtLang name="txtLang">Character Spacing</span> : </b><input type=text name=inpText_LetterSpacing size=3 value="" style="text-align:right" onblur="preview()" class="inpTxt">
      </div>

      <div style="padding:3px;"></div>
      <div id="divPreview" style="overflow:auto;border:1px dimgray solid;width:100%;height:70px;background:#ffffff"></div>
      </div>
  </td>
  </tr>
  </table>

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-top:10px;" align="right">
  <table cellpadding=0 cellspacing=0>
  <tr>
  <td>
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.closeWin()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  <td>
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.closeWin();" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  </td>
  </tr>
  </table>
</td>
</tr>
</table>

</body>
</html>